<template>
  <section class="slider">
    <mt-popup v-model="popupVisible" position="left">
      <div class="pop-content">
        <div class="user" @click="go('user')">
          <img :src="userHeadImg" :onerror="errorHeadImg" class="head-img">
          <p class="name">{{user.username || '未登录'}}</p>
        </div>
        <mt-cell :title="item.title" @click.native="go(item.link)" v-for="(item,index) in items" :key="index">
          <i class="fa fa-fw" slot="icon" :class="item.icon"></i>
        </mt-cell>
        <mt-cell title="首页" @click.native="abort('home')">
          <i class="fa fa-sign-out-alt fa-fw" slot="icon"></i>
        </mt-cell>
        <mt-cell title="关于" @click.native="abort('abort')">
          <i class="fa fa-sign-out-alt fa-fw" slot="icon"></i>
        </mt-cell>
        <mt-cell title="登出" @click.native="logout" v-if="user.id">
          <i class="fa fa-sign-out-alt fa-fw" slot="icon"></i>
        </mt-cell>
      </div>
      <div class="close-block" @click="close"></div>
    </mt-popup>
  </section>
</template>

<script>
import { MessageBox } from 'mint-ui'
export default {
  name: 'Silder',
  props: ['visible'],
  data() {
    return {
      user: {},
      popupVisible: true,
      userHeadImg: '',
      errorHeadImg: `this.src="${require('../assets/img/default-head.png')}"`,
      items: [
        {
          title: '个人信息',
          link: 'user',
          icon: "fa-user"
        },
        {
          title: '上传书籍',
          link: 'book-add',
          icon: "fa-book"
        },
        {
          title: '我的图书',
          link: 'book-my',
          icon: "fa-book"
        }
      ]
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    },
    logout() {
      MessageBox({
        title: '',
        message: '爱我别走~~',
        confirmButtonText: '那我不爱了',
        cancelButtonText: '不走咯',
        showCancelButton: true
      }).then(action => {
        UT.removeSession('CUR_USER')
        location.reload()
        // this.$router.push({ name: 'welcome' })
      }).catch(() => {

      })
    },
    abort(name){
      this.$router.push({ name: name })
    },
    go(name) {
      this.$CheckUser().then(() => {
        this.$router.push({ name: name })
      })
    }
  },
  watch: {
    visible: function(val) {
      this.popupVisible = val
    }
  },
  mounted() {
    this.popupVisible = this.visible
    this.user = UT.getSessionJson('CUR_USER')
    this.userHeadImg = `${__FILESERVER__}file/download?filId=${this.user.headImage}`
  }
}
</script>

<style lang="less">
.slider {
  .mint-popup {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
  }
  .pop-content {
    padding: 0 10px;
    width: 200px;
    background: #fff;
    .user {
      padding: 25px 0 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .name {
      margin-top: 10px;
    }
    .head-img {
      @size: 80px;
      width: @size;
      height: @size;
      border-radius: 100%;
    }
  }
  .close-block {
    flex: 1;
  }
  .mint-cell {
    height: 60px;
  }
  .mint-cell-wrapper {
    background-image: none;
  }
}
</style>
